<%@include file="header.jsp"%>
<form action ="UpdateBooking" method="post">
<input type="hidden" name="bookingID" value="${bookingdetails.bookingID }" size=15 maxlength=20>
<input type="hidden" name="currentFacilityID" value="${bookingdetails.facilityID }">  
<table class="table table-striped">
	<tr>
		<tr>
		<th align="center"><fmt:message
				key="label.facility.currentFacilityName" /></th>
		<td colspan="3"><input type="text" name="facilityname"
			value="${bookingdetails.facilityName}" size=15 maxlength=20
			readonly="readonly" /></td>
	</tr>
	<tr>
		<th align="center"><fmt:message key="label.facility.type" /></th>
		<td colspan="3"><select name="facilityType" id="facilityType">
				<option value="meeting room" ${param['facilityType']} =="meeting room" ? 'selected="selected"' : ""  }>meeting room</option>
				<option value="discussion room" ${param['facilityType']} =="discussion room" ? 'selected="selected"' : ""  }>discussion room</option>
				<option value="class room" ${param['facilityType']}=="class room" ? 'selected="selected"' : ""  }>class room</option>
				<option value="multi purpose hall" ${param['facilityType']}=="multi purpose hall" ? 'selected="selected"' : ""  }>multi purpose hall</option>
		</select> 
	</tr>
	<tr>
		<th align="center"><fmt:message key="label.booking.startDate" />
		</th>
		<td colspan="3"><div id="ajaxError" style="width:200px"></div><input type="text" name="timestamp" id="timestamp" value='<fmt:formatDate value="${bookingdetails.startDate}"/>'/></td>
	</tr>
	<tr>
		<th align="center"><fmt:message key="label.booking.period" /></th>
		<td colspan="3"><input type="text" name="period"
			value="${bookingdetails.period}" size=15 maxlength=30 id="period" /></td>
	</tr>
	<tr>
		<th align="center"><fmt:message
				key="label.facility.newFacilityName" />
		</th>
		<td colspan="3">
			<select name="facilityID" id="facilityID" value="${bookingdetails.facilityID}">
					<option value="-1">keep current facility</option>
			</select>
		<input type="button" class="btn btn-primary" id="checkBtn" value="check"/>
		<div id="ajaxError" style="width:200px"></div>
		</td>
	</tr>
	
	<tr>
	<th align="center"><fmt:message key="label.booking.priority" />
		</th>
			<td colspan="3"><select name="priority" }>
					<c:forEach var="onePriority" items="${priorities}"
						varStatus="status">
						<option value="${onePriority.priorityName}">
							<c:out value="${onePriority.priorityName}" />
						</option>
					</c:forEach>
			</select></td>
		</tr>
	<tr>
		<th align="center"><fmt:message key="label.booking.reason" /></th>
		<td colspan="3"><input type="text" name="reason"
			value="${bookingdetails.reason}" size=15 maxlength=30 /></td>
	</tr>
	<tr><td colspan="4" style="text-align:center">
		<div class="btn-group">
		<input type="submit" value="Update" class="btn btn-primary">
		<input type="reset" value="Reset" class="btn btn-primary">
		</div>
	</td></tr>
</table>
</form>

<script type="text/javascript">
	$(document).ready(
		function() {
			$("#checkBtn").click(
				function() {
					var period = $("#period").val();
					var timestamp = $("#timestamp").val();
					var facilityType = $('#facilityType').find(
							":selected").text();
					var priority = $('#priority').val();
					$.post("AvailableFacilityForUpdate", {
						period : period,
						timestamp : timestamp,
						facilityType : facilityType,
						priority : priority
					},function(data) {
						$("#facilityID").html('');
						$("#ajaxError").removeClass("alert").html("");
						if (data == 'error') {
							//$("#facilityID").html('<option value="-2">error</option>');
							$("#ajaxError").addClass("alert").append("Error occured.");
						} else {
							var faciArr = $.parseJSON(data);
							if (faciArr.length == 0) {
								//$("#facilityID").html('<option value="-3">no data</option>');
								$("#ajaxError").addClass("alert").append("No more availabe facilities.");
							} else {
								$("#ajaxError").addClass("alert").append("Availabe facilities found.");
								$.each(faciArr, function(index, value) {
									$("#facilityID").append('<option value="'+value.id+'">' + value.name + '</option>');
								});
							}
						}
						$("#facilityID").append('<option value="-1">keep current facility</option>');
					});
				});
			
			$("#timestamp").datepicker({
				format : 'yyyy-mm-dd',
				todayBtn : 'linked'
			}).on('changeDate',function(ev){
				//send ajax to backend.
				var dateStr = ev.date.format('yyyy-mm-dd');
				var period = $("#period").val();
				$.post('CheckHoliday',{dateString : dateStr, period: period},function(data){
					$("#ajaxError").removeClass("alert").html("");
					if(data == "true"){
						$("#ajaxError").addClass("alert").append("This date is a holiday.");
					}
				});
			});
		});
</script>
<%@include file="footer.jsp"%>